<template>
    <div> 
    <div >
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/install' }" style="font-size:20px">安装详情</el-breadcrumb-item>
      <el-breadcrumb-item :to="{path:'detailed' }" style="font-size:20px">详细安装</el-breadcrumb-item>
    </el-breadcrumb>
    </div>
    <el-form :inline="true" :model="query">
    
    <el-form-item>
      <el-input
        v-model="query.detailedLpName"
        placeholder="请输入灯杆编号"
        :clearable="true"
      ></el-input>
      
    </el-form-item>
    <el-form-item>
      <el-input
        v-model="query.installId"
        placeholder="请输入安装申请编号"
        :clearable="true"
      ></el-input>
    </el-form-item>
    <el-form-item>
      <el-row>
      <el-col :span="30">
      <el-button type="primary" @click="loadInst"
        ><i class="el-icon-search"></i
      ></el-button>
      <el-button type="success" @click="(dialog.addshow=true)"
        >添加</el-button
      >
      <el-button type="success" @click="reset">重置</el-button>
      <el-button type="success" @click="exportExcel">导出数据</el-button>
      </el-col>
      
     </el-row>
    </el-form-item>
  </el-form>
  <!-- ----------------------表格--------------------------- -->
  <el-table :data="detailedList"  style="width: 100%" class="box">
        <el-table-column prop="detailedId" label="详细安装编号" width="100"></el-table-column>
        <el-table-column prop="installId" label="安装申请编号" width="100"></el-table-column>
        <el-table-column prop="detailedLpName" label="灯杆编号" width="100"> </el-table-column>
        <el-table-column prop="detailedLpVoltage" label="电压" width="100"></el-table-column>
        <el-table-column prop="detailedLpCurrent" label="电流" width="100"></el-table-column>
        <el-table-column prop="detailedLpX" label="x轴" width="100"></el-table-column>
        <el-table-column prop="detailedLpY" label="y轴" width="100"></el-table-column>
        <el-table-column prop="detailedFac1Seller" label="设备1的厂家" width="100"></el-table-column>
        <el-table-column prop="detailedFac1Model" label="设备1的设备型号" width="100"></el-table-column>
        <el-table-column prop="detailedFac1Date" label="设备1的生产时间" width="100"></el-table-column>
        <el-table-column prop="detailedFac2Seller" label="设备2的厂家" width="100"></el-table-column>
        <el-table-column prop="detailedFac2Model" label="设备2的设备型号" width="100"></el-table-column>
        <el-table-column prop="detailedFac2Date" label="设备2的生产时间" width="100"></el-table-column>
        <el-table-column prop="detailedFac3Seller" label="设备3的厂家" width="100"></el-table-column>
        <el-table-column prop="detailedFac3Model" label="设备3的设备型号" width="100"></el-table-column>
        <el-table-column prop="detailedFac3Date" label="设备3的生产时间" width="100"></el-table-column>
        <el-table-column prop="detailedFac4Seller" label="设备4的厂家" width="100"></el-table-column>
        <el-table-column prop="detailedFac4Model" label="设备4的设备型号" width="100"></el-table-column>
        <el-table-column prop="detailedFac4Date" label="设备4的生产时间" width="100"></el-table-column>
        <el-table-column prop="detailedFac5Seller" label="设备5的厂家" width="100"></el-table-column>
        <el-table-column prop="detailedFac5Model" label="设备5的设备型号" width="100"></el-table-column>
        <el-table-column prop="detailedFac5Date" label="设备5的生产时间" width="100"></el-table-column>
        <el-table-column prop="detailedFac6Seller" label="设备6的厂家" width="100"></el-table-column>
        <el-table-column prop="detailedFac6Model" label="设备6的设备型号" width="100"></el-table-column>
        <el-table-column prop="detailedFac6Date" label="设备6的生产时间" width="100"></el-table-column>
        <el-table-column prop="detailedFac7Seller" label="设备7的厂家" width="100"></el-table-column>
        <el-table-column prop="detailedFac7Model" label="设备7的设备型号" width="100"></el-table-column>
        <el-table-column prop="detailedFac7Date" label="设备7的生产时间" width="100"></el-table-column>
        <el-table-column prop="detailedFac8Seller" label="设备8的厂家" width="100"></el-table-column>
        <el-table-column prop="detailedFac8Model" label="设备8的设备型号" width="100"></el-table-column>
        <el-table-column prop="detailedFac8Date" label="设备8的生产时间" width="100"></el-table-column>
    <el-table-column label="操作"  width="180">red3w33
      <template slot-scope="scope">
        <el-button size="mini" @click="handleEdit(scope.row.detailedId)" > 编辑</el-button>
        <el-popconfirm title="这是一段内容确定删除吗？" @confirm="handleDelete(scope.row.detailedId)">
          <el-button
          slot="reference"
          size="mini"
          type="danger"           
          >删除</el-button>
        </el-popconfirm>
      </template>
    </el-table-column>
  </el-table>
  <el-pagination
  @size-change="handleSizeChange"
  @current-change="handleCurrentChange"
  :current-page="query.currentPage"
  :page-sizes="page.pageSizes"
  :page-size="query.pageSize"
  layout="total, sizes, prev, pager, next, jumper"
  :total="page.total"
>
</el-pagination>
  <!-- -----------------------添加dialog------------------------------------------------------ -->
  <el-dialog title="添加记录" :visible.sync="dialog.addshow" width="30%">
    <el-form :model="form">
      <el-form-item label="安装编号" :label-width="formLabelWidth">
        <el-select v-model="addForm.installId" placeholder="请选择安装编号">
        <el-option
          v-for="(instal, index) in installList"
          :key="index"
          :label="instal.installId"
          :value="instal.installId"
        ></el-option>
      </el-select>
      </el-form-item>
      <el-form-item label="灯杆编号" :label-width="formLabelWidth">
          <el-input v-model="addForm.detailedLpName" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="电压" :label-width="formLabelWidth">
          <el-input v-model="addForm.detailedLpVoltage" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="电流" :label-width="formLabelWidth">
          <el-input v-model="addForm.detailedLpCurrent" autocomplete="off"></el-input>
        </el-form-item>
      <el-form-item label="x轴" :label-width="formLabelWidth">
        <el-input v-model="addForm.detailedLpX" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="y轴" :label-width="formLabelWidth">
        <el-input v-model="addForm.detailedLpY" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="设备1的厂家" :label-width="formLabelWidth">
        <el-input v-model="addForm.detailedFac1Seller" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="设备1的设备型号" :label-width="formLabelWidth">
        <el-input v-model="addForm.detailedFac1Model" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="设备1的生产时间" :label-width="formLabelWidth">
        <el-input v-model="addForm.detailedFac1Date" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="设备2的厂家" :label-width="formLabelWidth">
        <el-input v-model="addForm.detailedFac2Seller" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="设备2的设备型号" :label-width="formLabelWidth">
        <el-input v-model="addForm.detailedFac2Model" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="设备2的生产时间" :label-width="formLabelWidth">
        <el-input v-model="addForm.detailedFac2Date" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="设备3的厂家" :label-width="formLabelWidth">
        <el-input v-model="addForm.detailedFac3Seller" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="设备3的设备型号" :label-width="formLabelWidth">
        <el-input v-model="addForm.detailedFac3Model" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="设备3的生产时间" :label-width="formLabelWidth">
        <el-input v-model="addForm.detailedFac3Date" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="设备4的厂家" :label-width="formLabelWidth">
        <el-input v-model="addForm.detailedFac4Seller" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="设备4的设备型号" :label-width="formLabelWidth">
        <el-input v-model="addForm.detailedFac4Model" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="设备4的生产时间" :label-width="formLabelWidth">
        <el-input v-model="addForm.detailedFac4Date" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="设备5的厂家" :label-width="formLabelWidth">
        <el-input v-model="addForm.detailedFac5Seller" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="设备5的设备型号" :label-width="formLabelWidth">
        <el-input v-model="addForm.detailedFac5Model" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="设备5的生产时间" :label-width="formLabelWidth">
        <el-input v-model="addForm.detailedFac5Date" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="设备6的厂家" :label-width="formLabelWidth">
        <el-input v-model="addForm.detailedFac6Seller" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="设备6的设备型号" :label-width="formLabelWidth">
        <el-input v-model="addForm.detailedFac6Model" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="设备6的生产时间" :label-width="formLabelWidth">
        <el-input v-model="addForm.detailedFac6Date" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="设备7的厂家" :label-width="formLabelWidth">
        <el-input v-model="addForm.detailedFac7Seller" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="设备7的设备型号" :label-width="formLabelWidth">
        <el-input v-model="addForm.detailedFac7Model" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="设备7的生产时间" :label-width="formLabelWidth">
        <el-input v-model="addForm.detailedFac7Date" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="设备8的厂家" :label-width="formLabelWidth">
        <el-input v-model="addForm.detailedFac8Seller" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="设备8的设备型号" :label-width="formLabelWidth">
        <el-input v-model="addForm.detailedFac8Model" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="设备8的生产时间" :label-width="formLabelWidth">
        <el-input v-model="addForm.detailedFac8Date" autocomplete="off"></el-input>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="restForm">取 消</el-button>
      <el-button type="primary" @click="addIns">提 交</el-button>
    </div>
  </el-dialog>
   <!-- -----------------------修改dialog------------------------------------------------------ -->
   <el-dialog title="修改记录" :visible.sync="dialog.updateshow" width="30%">
    <el-form :model="form">
      <el-form-item label="安装编号" :label-width="formLabelWidth">
        <el-select v-model="updateForm.installId" placeholder="请选择安装编号">
        <el-option
          v-for="(instal, index) in installList"
          :key="index"
          :label="instal.installId"
          :value="instal.installId"
        ></el-option>
      </el-select>
      </el-form-item>
      <el-form-item label="灯杆编号" :label-width="formLabelWidth">
          <el-input v-model="updateForm.detailedLpName" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="电压" :label-width="formLabelWidth">
          <el-input v-model="updateForm.detailedLpVoltage" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="电流" :label-width="formLabelWidth">
          <el-input v-model="updateForm.detailedLpCurrent" autocomplete="off"></el-input>
        </el-form-item>
      <el-form-item label="x轴" :label-width="formLabelWidth">
        <el-input v-model="updateForm.detailedLpX" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="y轴" :label-width="formLabelWidth">
        <el-input v-model="updateForm.detailedLpY" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="设备1的厂家" :label-width="formLabelWidth">
        <el-input v-model="updateForm.detailedFac1Seller" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="设备1的设备型号" :label-width="formLabelWidth">
        <el-input v-model="updateForm.detailedFac1Model" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="设备1的生产时间" :label-width="formLabelWidth">
        <el-input v-model="updateForm.detailedFac1Date" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="设备2的厂家" :label-width="formLabelWidth">
        <el-input v-model="updateForm.detailedFac2Seller" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="设备2的设备型号" :label-width="formLabelWidth">
        <el-input v-model="updateForm.detailedFac2Model" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="设备2的生产时间" :label-width="formLabelWidth">
        <el-input v-model="updateForm.detailedFac2Date" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="设备3的厂家" :label-width="formLabelWidth">
        <el-input v-model="updateForm.detailedFac3Seller" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="设备3的设备型号" :label-width="formLabelWidth">
        <el-input v-model="updateForm.detailedFac3Model" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="设备3的生产时间" :label-width="formLabelWidth">
        <el-input v-model="updateForm.detailedFac3Date" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="设备4的厂家" :label-width="formLabelWidth">
        <el-input v-model="updateForm.detailedFac4Seller" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="设备4的设备型号" :label-width="formLabelWidth">
        <el-input v-model="updateForm.detailedFac4Model" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="设备4的生产时间" :label-width="formLabelWidth">
        <el-input v-model="updateForm.detailedFac4Date" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="设备5的厂家" :label-width="formLabelWidth">
        <el-input v-model="updateForm.detailedFac5Seller" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="设备5的设备型号" :label-width="formLabelWidth">
        <el-input v-model="updateForm.detailedFac5Model" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="设备5的生产时间" :label-width="formLabelWidth">
        <el-input v-model="updateForm.detailedFac5Date" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="设备6的厂家" :label-width="formLabelWidth">
        <el-input v-model="updateForm.detailedFac6Seller" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="设备6的设备型号" :label-width="formLabelWidth">
        <el-input v-model="updateForm.detailedFac6Model" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="设备6的生产时间" :label-width="formLabelWidth">
        <el-input v-model="updateForm.detailedFac6Date" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="设备7的厂家" :label-width="formLabelWidth">
        <el-input v-model="updateForm.detailedFac7Seller" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="设备7的设备型号" :label-width="formLabelWidth">
        <el-input v-model="updateForm.detailedFac7Model" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="设备7的生产时间" :label-width="formLabelWidth">
        <el-input v-model="updateForm.detailedFac7Date" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="设备8的厂家" :label-width="formLabelWidth">
        <el-input v-model="updateForm.detailedFac8Seller" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="设备8的设备型号" :label-width="formLabelWidth">
        <el-input v-model="updateForm.detailedFac8Model" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="设备8的生产时间" :label-width="formLabelWidth">
        <el-input v-model="updateForm.detailedFac8Date" autocomplete="off"></el-input>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="dialog.updateshow = false">取 消</el-button>
      <el-button type="primary" @click="updateIns">提 交</el-button>
    </div>
  </el-dialog>
</div>
</template>

<script>
export default {
data() {
  return {
    detailedList:[],
    lpList:[],
    roleList:[],
    installList:[],
    troopsList:[],
    handleList:[],
    page: {
    pageSizes: [5, 10, 20, 50, 100], //下拉列表中的数组
    total: 0, //一共有多少条数据
  },
    dialog: {
      addshow: false,
      updateshow:false,
    },
    query:{
      currentPage: 1, //代表当前页
      pageSize: 5, //代表每页显示多少条数据
      installId:"",
      detailedLpName:""
    },
    addForm: {},
    updateForm: {},
  };
},
methods: {
  reset()  {
 this.query.installId="";
 this.query.detailedLpName="";
 this.loadInst();
},    
  exportExcel() {      
  this.$axios
    .post("detaileds/exportExcel", this.query,{responseType: 'blob'})
    .then((res) => {
      let fileName = res.headers["content-disposition"].split("=")[1];//得到后端生成的文件名          
      let url = window.URL.createObjectURL(new Blob([res.data]));
      let dom = document.createElement("a");
      dom.style.display = "none";
      dom.href = url;
      dom.setAttribute("download", fileName); //指定下载后的文件名，防跳转
      document.body.appendChild(dom);
      dom.click();
      // 释放内存
      dom.parentNode.removeChild(dom)
      window.URL.revokeObjectURL(dom.href);
    })
    .catch(function (error) {
      console.log(error);
    });
},
  loadInst() {
  this.$axios.post("/detaileds/query",this.query).then((res) => {
    this.detailedList = res.data.data.list;
    this.page.total = res.data.data.total;
  });
},    
loaLp(){
  this.$axios.get("/lpoles/sele").then((res) => {
    this.lpList = res.data.data.List;
  });
},
loadRole(){
  this.$axios.get("role").then((res) => {
    this.roleList = res.data.data.list;
  });
},
loadInstall(){
  this.$axios.get("/installs/sel").then((res) => {
    this.installList = res.data.data.list;
  });
},
loadTroops(){
  this.$axios.get("troops").then((res) => {
    this.troopsList = res.data.data.list;
  });
},
loadHandle(){
  this.$axios.get("handle").then((res) => {
    this.handleList = res.data.data.list;
  });
},
  addIns() {
    this.$axios.post("/detaileds", this.addForm).then((res) => {
      if(res.data.code==200){
          this.restForm();
          this.loadInst();//重新加载数据
      }
    });
  },
  updateIns() {
    this.$axios.put("/detaileds", this.updateForm).then((res) => {
      if(res.data.code==200){
          this.dialog.updateshow = false;//关掉模态框
          this.loadInst();//重新加载数据
      }
    });
  },
  handleEdit(id){
      //显示修改模态框
      this.dialog.updateshow = true;
      //查询对应的数据
      this.$axios.get("/detaileds/"+id).then((res) => {
      this.updateForm = res.data.data.list;

    });
  },
  handleSizeChange(val) {
  //当每页数据改变时
  this.query.pageSize = val;
  this.loadInst();
},
restForm(){
  this.dialog.addshow = false;//关掉模态框
  this.addForm={
  }
},
handleCurrentChange(val) {
  //当点击页码时
  this.query.currentPage = val;
  this.loadInst();
},
handleDelete(id){        
      //查询对应的数据
      this.$axios.delete("/detaileds/"+id).then((res) => {
          if(res.data.code==200){ 
         this.$message.success("删除成功");           
          this.loadInst();//重新加载数据
      }
    });
  },
},
mounted() {
  this.loadInst();
  this.loadRole();
  this.loaLp();
  this.loadTroops();
  this.loadInstall();
  this.loadHandle();
},
};
</script>
<style>
.box{
margin-top: 0%;
} 
</style>